<template>
	<view class="container">
		<view class="play_movie">
			<sunny-video
			    ref="sunnyVideo" 
			    :title="movieTitle" 
			    :src="nowMovieData.movieJiUrl" 
			    :poster="movie.imgHref"
				:seekTime="videoSeekTime"
			    @timeupdate="timeupdate" 
				@play="playMovie"
			/>
		</view>
		<view class="movie_ji">
			<view class="ji_text">
				<text>资源列表</text>
			</view>
			<view class="movie_list">
				<view v-for="(item, index) in jiList" :key="index">
				    <view :class="index === nowNum ? jiBlueList : jiGreyList" @click="playClick(item)">
						<text>{{ item.playName }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				movie: {},
				movieSrc: '',
				jiList: [],
				nowNum: 0,
				jiBlueList: 'ji_blue_list',
				jiGreyList: 'ji_list',
				loadingPageData: {
					loading: false,
					loadingMode: 'spinner',
					bgColor: 'rgba(0, 0, 0, 0.3)',
					color: '#eee',
					loadingColor: '#ddd'
				},
				movieTitle: '',
				type: 0,
				nowMovieData: {}, // 当前正在播放的影视信息，用来返回或者退出APP时记录用户播放的信息
				videoSeekTime: 0
			}
		},
		onLoad(option) {
			const item = JSON.parse(decodeURIComponent(option.params));
			this.movie = item
			// console.log('this.movie', this.movie)
			if (this.movie.userHistoryId) {
				// 通过影视历史播放ID查询
				this.type = 1
				this.queryByUserHistoryId(this.movie.userHistoryId)
			} else {
				// 通过影视详细地址去得到影视的集数
				this.type = 0
				this.queryMovieJi()
			}
		},
		onBackPress(e) {
			// console.log('返回了:', e)
			this.$refs.sunnyVideo.changePause()
			this.updateUserPlayer()
			if (this.type === 1) {
				uni.switchTab({
					url: '/pages/movies/index'
				});
			} else {
				// uni.navigateBack({
				//     delta: 1
				// });
			}
		},
		onHide() {
			// console.log('当前页隐藏了')
			this.$refs.sunnyVideo.changePause()
			this.updateUserPlayer()
		},
		methods: {
			// 如果用户返回了或者退出APP时需要记录当前播放到第几集和第几秒
			updateUserPlayer() {
				if (this.nowMovieData) {
					uni.showLoading({
						title: '更新中,请耐心等待一下!',
						mask: true
					})
					const _that = this
					if (!_that.nowMovieData.movieNowSecond) {
						_that.nowMovieData.movieNowSecond = 0;
					}
					// 调用后台接口
					_that.$api.post({
						url: '/app/movie/search/updateUserHistoryPlayer',
						params: _that.nowMovieData
					}).then(res => {
						// console.log('res', res)
						if (res && res.data.code === 200) {
							uni.showToast({
								title: '更新成功!',
								icon: 'none',
								duration: 2000
							})
						}
						uni.hideLoading()
					}).catch(error => {
						console.log('fail:', error)
						uni.hideLoading()
					})
				}
			},
			// 通过影视历史播放ID查询
			queryByUserHistoryId(userHistoryId) {
				uni.showLoading({
					title: '查询中,请耐心等待一下!',
					mask: true
				})
				const _that = this
				// 调用后台接口
				_that.$api.get({
					url: '/app/movie/search/searchByUserHistoryId',
					params: {
						userHistoryId: userHistoryId
					}
				}).then(res => {
					// console.log('res', res)
					if (res && res.data.code === 200) {
						let info = res.data.info
						_that.jiList = info.jiList
						// 获取当前播放到第几集
						var nowNumIndex = info.jiList.map(item => item.id).indexOf(info.movieNowJi)
						_that.nowNum = nowNumIndex
						_that.movieSrc = info.movieJiUrl
						_that.movieTitle = ''
						_that.movieTitle = info.movieName + ' - ' + info.playName
						if (info.movieNowSecond) {
							_that.videoSeekTime = info.movieNowSecond
						}
						// _that.$refs.sunnyVideo.changePlay()
						// 当前播放的影视信息
						_that.nowMovieData = {
							movieJiUrl: info.movieJiUrl
						}
					}
					uni.hideLoading()
				}).catch(error => {
					console.log('fail:', error)
					uni.hideLoading()
				})
			},
			// 通过影视详细地址去得到影视的集数
			queryMovieJi() {
				uni.showLoading({
					title: '查询中,请耐心等待一下!',
					mask: true
				})
				const _that = this
				// 调用后台接口
				_that.$api.post({
					url: '/app/movie/search/searchJi',
					params: _that.movie
				}).then(res => {
					// console.log('res', res)
					if (res && res.data.code === 200) {
						_that.jiList = res.data.jiList
						// console.log(_that.movieDatas)
					}
					uni.hideLoading()
				}).catch(error => {
					console.log('fail:', error)
					uni.hideLoading()
				})
			},
			// 视频组件播放进度变化时触发
			timeupdate(e) {
				// console.log('e', e)
				// console.log(e.target.currentTime)
				this.nowMovieData.movieNowSecond = e.target.currentTime
			},
			// 监听开始播放
			playMovie() {
				console.log('开始播放了')
			},
			// 点击集数开始播放
			playClick(item) {
				if (this.type === 0) {
					this.movieSrc = item.playUrl
					this.movieTitle = ''
					this.movieTitle = this.movie.movieName + ' - ' + item.playName
					this.nowNum = item.index
					// this.loadingPageData.loading = true
					// this.$refs.sunnyVideo.changePlay()
					// 当前播放的影视信息
					this.nowMovieData = {
						movieJiUrl: item.playUrl
					}
					this.videoSeekTime = 0
				} else {
					this.nowNum = 0
					this.movieSrc = item.movieJiUrl
					this.movieTitle = ''
					this.movieTitle = this.movie.movieName + ' - ' + item.playName
					// this.$refs.sunnyVideo.changePlay()
					// 当前播放的影视信息
					this.nowMovieData = {
						movieJiUrl: item.movieJiUrl
					}
					this.videoSeekTime = 0
				}
			}
		}
	}
</script>

<style lang="scss">
	.ji_text {
		margin-top: 20rpx;
		margin-left: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.ji_blue_list {
		width: 150rpx;
		height: 60rpx;
		background: #0000ff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10rpx;
		color: #ffffff;
		border-radius: 10rpx;
		flex-basis: 25%;
		box-sizing: border-box;
		margin: 15rpx 20rpx 0 15rpx;
	}
	
	.ji_list {
		width: 150rpx;
		height: 60rpx;
		background: #636363;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10rpx;
		color: #ffffff;
		border-radius: 10rpx;
		flex-basis: 25%;
		box-sizing: border-box;
		margin: 15rpx 20rpx 0 15rpx;
	}
	
	.movie_list {
		display: flex;
		flex-wrap: wrap;
	}
</style>